<template name="LeadAddView">
	<view class="lead-add-view">
		<view class="title">
			<text >基本信息录入</text>
		</view>
		<u-form :model="form" ref="uForm" label-width="180">
			<u-form-item label="线索来源" prop="channel">
				<u-input v-model="form.channel" type="select" @click="channelShow = true" />
			</u-form-item>
			<u-form-item label="孩子姓名" prop="childName">
				<u-input v-model="form.childName" />
			</u-form-item>
			<u-form-item label="家长姓名" prop="name">
				<u-input v-model="form.name" />
			</u-form-item>
			<u-form-item label="联系电话" prop="mobile">
				<u-input v-model="form.mobile" />
			</u-form-item>
			<u-form-item label="与宝宝关系" prop="relationship">
				<u-input v-model="form.relationship" type="select" @click="relationShow = true" />
			</u-form-item>
		</u-form>
		<u-button @click="submit" style="margin-top: 40rpx;">提交</u-button>
		<u-action-sheet :list="channelList" v-model="channelShow" @click="channelClick"></u-action-sheet>
		<u-action-sheet :list="relationList" v-model="relationShow" @click="relationClick"></u-action-sheet>
	</view>
</template>

<script>
	import {
		getAllChannel,
		addLeads
	} from '@/api/clientele.js'
	export default {
		name: "LeadAddView",
		data() {
			return {
				form: {
					channelId: '',
					channel: '',
					childName: '',
					name: '',
					mobile: '',
					relationship: '',
					isComplete: '',
					category: 1,
				},
				rules: {
					channel: [{
						required: true,
						message: '请选择线索来源',
						trigger: ['blur'],
					}],
					childName: [{
						required: true,
						message: '请输入孩子姓名',
						trigger: ['blur'],
					}],
					name: [{
						required: true,
						message: '请输入家长姓名',
						trigger: ['blur'],
					}],
					mobile: [{
							required: true,
							message: '请输入联系电话',
							trigger: ['blur'],
						},
						{
							validator: (rule, value, callback) => {
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['blur'],
						}
					],
					relationship: [{
						required: true,
						message: '请选择家长和孩子关系',
						trigger: ['blur'],
					}],
				},
				channelShow: false,
				channelList: [],

				relationShow: false,
				relationList: [{
						text: '爸爸'
					},
					{
						text: '妈妈'
					},
					{
						text: '爷爷'
					},
					{
						text: '奶奶'
					},
					{
						text: '外公'
					},
					{
						text: '外婆'
					},
					{
						text: '其他'
					},
				]
			}
		},
		created() {
			this.getChannel();
		},
		methods: {
			channelClick(index) {
				console.log(index);
				this.form.channel = this.channelList[index].text;
				this.form.channelId = this.channelList[index].id;
			},
			
			relationClick(index) {
				this.form.relationship = this.relationList[index].text;
			},
			
			submit() {
				console.log('提交');		
				const areaId = this.$store.state.user.tchInfo.area.id;
				this.$refs.uForm.setRules(this.rules);
				this.$refs.uForm.validate(valid => {
					console.log(valid);
					if (!valid) {
						return;
					}
					this.form.areaId = areaId;
					this.$u.toast('提交中');
					addLeads(this.form).then(res => {
						console.log(res);
						uni.hideLoading();
						this.$emit('addLeadEvent')
					})
				});
			},
			
			getChannel() {
				getAllChannel().then(res => {
					let list = res.data;
					for (let index in list) {
						let item = list[index];
						item.text = item.name;
					}
					this.channelList = list;
				})
			},
		}
	}
</script>

<style lang="scss">
	.lead-add-view{
		padding: 50rpx;
		
		.title{
			margin-bottom: 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>
